<script type="text/javascript"
	src="<?=$this->baseUrl();?>/js/divCollapser.js"></script>

<script type="text/javascript">
  dojo.require("dijit.form.Button");
  dojo.require("dojo.data.ItemFileReadStore");
  dojo.require("dojo.parser");
  dojo.require("dojo.fx");
  
  //Datastores
  var dungeonStore = new dojo.data.ItemFileReadStore({url:"<?=$this->url(array('controller'=>'raids', 'action'=>'getdungeons'))?>"});
  var bossesStore = new dojo.data.ItemFileReadStore({url:"<?=$this->url(array('controller'=>'raids', 'action'=>'getbosses'))?>"}); 
  //  new dojo.data.ItemFileReadStore({data: <?=$this->bossesList?>});
  
  
  
  var animDiv = new divCollapser();
  
  var toggleDiv = function(menuDivId,subDivId,collapsLabel,noCollapsLabel)
  {
  	animDiv.toggle(subDivId);
  	if (animDiv.isCollapsed(subDivId)) dojo.byId(menuDivId).innerHTML = collapsLabel;
  	else dojo.byId(menuDivId).innerHTML = noCollapsLabel;
  };
  
  var selectDungeon = function(dungeonId,select)
  {
  	var div = dojo.byId("dungeon:"+dungeonId);
  	dojo.attr(div,"selected",select);
	
	var bosses = dojo.byId("dungeon:"+dungeonId+":bosses").childNodes;
	
	for (var i = 0; i < bosses.length; i++){
		dojo.attr(bosses[i],"selected",select);
	}	
  	updateSelected(); 
  };
  
  var selectBoss = function(bossId,dungeonId,select)
  {
  	if (select == "true"){
	  	dojo.attr(dojo.byId("boss:"+bossId),"selected",select);
	  	dojo.attr(dojo.byId("dungeon:"+dungeonId),"selected",select);
	  	
  	} else {
  		dojo.attr(dojo.byId("boss:"+bossId),"selected",select);
  		var bossSelected = "false";
  		var bosses = dojo.byId("dungeon:"+dungeonId+":bosses").childNodes;
  		
  		for (var k = 0; k < bosses.length; k++){
  			if (dojo.attr(bosses[k],"selected") == "true"){
  				bossSelected = "true";
  			}
  		}
  		if (bossSelected == "false") dojo.attr(dojo.byId("dungeon:"+dungeonId),"selected",select);
  	}
  	updateSelected();
  };
  
  
  var updateSelected = function()
  {   	
  	var selectedDiv = dojo.byId("raids_selected");
  	selectedDiv.innerHTML = "";
  	var somethingFound = "false";
  	for (var j = 2; j >= 0; j--){
  	  	var dungeons = dojo.byId("expansion:"+j).childNodes;
	  	for (var i = 0; i < dungeons.length; i++){  		
	  		if (dojo.attr(dungeons[i],"selected") == "true"){
	  			somethingFound = "true";
	  			var dungeonDiv = document.createElement("div");
	  			dojo.attr(dungeonDiv,"dungeonId",dojo.attr(dungeons[i],"dungeonId"));
	  			dungeonDiv.innerHTML = "<b> - "+dojo.attr(dungeons[i],"dungeonName")+"</b>";
	  			dojo.attr(dungeonDiv,"onClick","selectDungeon(\""+dojo.attr(dungeons[i],'dungeonId')+"\",\"false\");")
	  			
	  			var bossesDiv = document.createElement("div");
	  			var bosses = dojo.byId("dungeon:"+dojo.attr(dungeons[i],'dungeonId')+":bosses").childNodes;
	  			for (var k = 0; k < bosses.length; k++){
	  				if (dojo.attr(bosses[k],"selected") == "true"){
	  					var boss = document.createElement("div");
	  					dojo.attr(boss,"bossId",dojo.attr(bosses[k],"bossId"));
	  					dojo.attr(boss,"onClick","selectBoss("+dojo.attr(bosses[k],'bossId')+",\""+dojo.attr(dungeons[i],'dungeonId')+"\",\"false\");");
	  					boss.innerHTML = dojo.attr(bosses[k],"bossName");
	  					bossesDiv.appendChild(boss);
	  				}
	  			}
	  			
	  			dojo.byId("raids_selected").appendChild(dungeonDiv);
	  			dojo.byId("raids_selected").appendChild(bossesDiv);
	  			
	  			//alert("dungeon: "+dungeons[i].id);
	  		}
	  		//alert("dungeon: "+dungeons[i].id);
	  	}
  	}
  	if (somethingFound == "false") selectedDiv.innerHTML = "none selected";
  };

  
  var setClassName = function(divId,className)
  {
  	dojo.byId(divId).className = className;
  };
  
  var addDungeonDiv = function(dungeonId,expansion,dungeonName)
  {
  	//Creating a new div
  	var div = document.createElement("div");
  	var addDiv = document.createElement("div");
  	var titleDiv = document.createElement("div");
  	var bossesDiv = document.createElement("div");
  	
  	//Setting all attributes
  	dojo.attr(div,"id","dungeon:"+dungeonId);
  	dojo.attr(div,"dungeonId",dungeonId);
  	dojo.attr(div,"class","dungeon:not_marked");  	
  	dojo.attr(div,"ONMOUSEOVER","setClassName('dungeon:"+dungeonId+":bosses','innerinnerbox');");
  	dojo.attr(div,"ONMOUSEOUT","setClassName('dungeon:"+dungeonId+":bosses','bosses:not_marked');");
  	dojo.attr(div,"style","clear: both");
  	dojo.attr(div,"selected","false");
  	dojo.attr(div,"dungeonName",dungeonName);
  	
  	dojo.attr(bossesDiv,"id","dungeon:"+dungeonId+":bosses");
  	dojo.attr(bossesDiv,"class","bosses:not_marked");
  	dojo.attr(bossesDiv,"style","width: 100%");
  	
  	dojo.attr(titleDiv,"id","dungeon:"+dungeonId+":title");
  	dojo.attr(titleDiv,"style","float: left");
	dojo.attr(titleDiv,"onClick","toggleDiv(\"dungeon:"+dungeonId+":title"+"\",\"dungeon:"+dungeonId+":bosses\",\"<b>(+) "+dungeonName+"</b>\",\"<b>(-) "+dungeonName+"</b>\");");
	
	dojo.attr(addDiv,"style","float: right");
	dojo.attr(addDiv,"onClick","selectDungeon("+dungeonId+",\"true\");");

	addDiv.innerHTML = "add";

	//Writting the contents of the div
  	//div.innerHTML = dungeonName;
  	
  	div.appendChild(titleDiv);
  	div.appendChild(addDiv);
  	
  	//Appending the div
  	dojo.byId("expansion:"+expansion).appendChild(div);
  	dojo.byId("expansion:"+expansion).appendChild(bossesDiv);
  	
  	toggleDiv("dungeon:"+dungeonId+":title","dungeon:"+dungeonId+":bosses","<b>(+) "+dungeonName+"</b>","<b>(-) "+dungeonName+"</b>");
  	
  	//toggleDiv("dungeon:"+dungeonId,"dungeon:"+dungeonId+":bosses","<b>(+) "+dungeonName+"</b>","<b>(-) "+dungeonName+"</b>");
  };
  
  var addBossDiv = function(bossId,dungeonId,bossName)
  {
  	//Creating a new div
  	var div = document.createElement("div");
  	
  	//Setting all attributes
  	dojo.attr(div,"id","boss:"+bossId);
  	dojo.attr(div,"class","boss:not_marked");
  	dojo.attr(div,"selected","false");
  	dojo.attr(div,"bossId",bossId);
  	dojo.attr(div,"bossName",bossName);
  	
  	dojo.attr(div,"ONMOUSEOVER","setClassName('boss:"+bossId+"','innerinnerbox');");
  	dojo.attr(div,"ONMOUSEOUT","setClassName('boss:"+bossId+"','boss:not_marked');");
  	dojo.attr(div,"onClick","selectBoss("+bossId+","+dungeonId+",\"true\");");
  	
  	//Writting the contents of the div
  	div.innerHTML = bossName;
  	
  	//Appending the div
  	dojo.byId("dungeon:"+dungeonId+":bosses").appendChild(div);
  };
  
  
  var addDungeonsToDiv = function(items, request){
  	for (var i = 0; i < items.length; i++){
  		var item = items[i];
  		
  		addDungeonDiv(	dungeonStore.getIdentity(item),
  						dungeonStore.getValue(item,"expansion"),
  						dungeonStore.getLabel(item)	);
  	}
  };
  
  var addBossesToDiv = function(items, request){
       	for (var i = 0; i < items.length; i++){
  		var item = items[i];

  			addBossDiv(	bossesStore.getIdentity(item),
  						bossesStore.getValue(item,"dungeon_id"),
  						bossesStore.getLabel(item)	);
  	}
  };
  
  var createRaid = function(){
  	alert("pushed");
  };
  
  
  var initDND = function()
  {
  	toggleDiv('wotlk','expansion:2','<b>(+) WotLK </b>','<b>(-) WotLK</b>');
  	toggleDiv('tbc','expansion:1','<b>(+) TBC </b>','<b>(-) TBC</b>');
  	toggleDiv('classic','expansion:0','<b>(+) Classic </b>','<b>(-) Classic</b>')
  	dungeonStore.fetch({onComplete: addDungeonsToDiv});
  	bossesStore.fetch({onComplete: addBossesToDiv}); 
  	//alert(dojo.byId("expansion:1").innerHTML); 	
  }  
  dojo.addOnLoad(initDND);
</script>


<style type="text/css">
.box {
/*	margin-top: 5px;*/
	color: #292929;
	width: 220px;
/*	top: 80px;
	border: 1px solid #BABABA; */
	background-color: #ddd;
/*	padding-left: 10px;
	padding-right: 10px;
	margin-left: 10px;
	margin-bottom: 1em;
	-o-border-radius: 10px;
	-moz-border-radius: 12px;
	-webkit-border-radius: 10px;
	-webkit-box-shadow: 0px 3px 7px #adadad;
	border-radius: 10px;
	-moz-box-sizing: border-box;
	-opera-sizing: border-box;
	-webkit-box-sizing: border-box;
	-khtml-box-sizing: border-box;
	box-sizing: border-box;
	overflow: hidden; */
	cursor: pointer;
}

.innerbox { 
/*	margin-top: 10px;*/ 
	color: #292929; 
/*	width: 100px; 
	top: 80px; 
	border: 1px solid #BABABA; */
	background-color: #ffff66;
/*	padding-left: 10px;
	padding-right: 10px; 
	margin-left: 10px; 
	margin-bottom: 1em;
	-o-border-radius: 10px;
	-moz-border-radius: 12px;
	-webkit-border-radius: 10px;
	-webkit-box-shadow: 0px 3px 7px #adadad;
	border-radius: 10px;
	-moz-box-sizing: border-box;
	-opera-sizing: border-box;
	-webkit-box-sizing: border-box;
	-khtml-box-sizing: border-box;
	box-sizing: border-box;
	overflow: hidden;*/
	cursor: pointer;
}

.innerinnerbox { 
/*	margin-top: 10px;*/ 
	color: #292929; 
/*	width: 100px; 
	top: 80px; 
	border: 1px solid #BABABA;*/
	background-color: #FFFF99;
/*	padding-left: 10px;
	padding-right: 10px; 
	margin-left: 10px; 
	margin-bottom: 1em;
	-o-border-radius: 10px;
	-moz-border-radius: 12px;
	-webkit-border-radius: 10px;
	-webkit-box-shadow: 0px 3px 7px #adadad;
	border-radius: 10px;
	-moz-box-sizing: border-box;
	-opera-sizing: border-box;
	-webkit-box-sizing: border-box;
	-khtml-box-sizing: border-box;
	box-sizing: border-box;
	overflow: hidden;
	cursor: pointer;*/
}
</style>


<h1>Select Raid Time:</h1>

<table class="shaded">
	<tr>
		<td><?php echo $this->form->getElement('start_date'); ?></td>
		<td><?php echo $this->form->getElement('start_time'); ?></td>
	</tr>
	<tr>
		<td><?php echo $this->form->getElement('signup_date'); ?></td>
		<td><?php echo $this->form->getElement('signup_time'); ?></td>
	</tr>
	<tr>
		<td><?php echo $this->form->getElement('finish_date'); ?></td>
		<td><?php echo $this->form->getElement('finish_time'); ?></td>
	</tr>
</table>

<h1>Select Dungeons/Raids:</h1>

<table class="shaded">
	<tr>
		<td>

		<div id="wotlk" class="box"
			onClick="toggleDiv('wotlk','expansion:2','<b>(+) WotLK </b>','<b>(-) WotLK</b>');">
		<b>WotLK</b></div>
		<div id="expansion:2" class="box"></div>

		<br>

		<div id="tbc" class="box"
			onClick="toggleDiv('tbc','expansion:1','<b>(+) TBC </b>','<b>(-) TBC</b>');">
		<b>TBC</b></div>

		<div id="expansion:1" class="box"></div>

		<br>

		<div id="classic" class="box"
			onClick="toggleDiv('classic','expansion:0','<b>(+) Classic </b>','<b>(-) Classic</b>');">
		<b>Classic</b></div>

		<div id="expansion:0" class="box"></div>

		</td>

		<td>

		<div id="raids_selected_menu" class="box"><b>Raids Selected</b></div>
		<div id="raids_selected" class="box">none selected</div>

		</td>
	</tr>
</table>

<h1>Select Raid Leader:</h1>

<?php echo $this->form->getElement('raid_leader'); ?>

<h1>Create Raid:</h1>
<BUTTON TYPE=button ID=toggler ONCLICK="createRaid()">Create Raid</BUTTON>
